<template>
	<view class="index" v-bind:style="initStyle">
		<!-- 头部组件 -->
		<view class="top-title">
			<NavBar title="升级合伙人" leftIcon="/static/img/index/119.png"> </NavBar>
		</view>
		<view class="topbar">
			<view class="cardContent">
				<view class="leftContent">
					<view class="name">
						{{personMsg.level.name}}
					</view>
					<view class="time">
						{{personMsg.endTime}}
					</view>
					<!-- 	<view class="explain">
						{{personMsg.level.desc}}
					</view> -->
				</view>
				<image style="width: 90rpx;height: 90rpx;" v-if="personMsg.level.value=='LEVEL_3'" src="../../static/img/superior.png" mode="widthFix"></image>
				<image style="width: 90rpx;height: 90rpx;" v-if="personMsg.level.value=='LEVEL_2'" src="../../static/img/tianshiicon.png" mode="widthFix"></image>
				<image style="width: 90rpx;height: 90rpx;" v-if="personMsg.level.value=='LEVEL_1'" src="../../static/img/chujiicon.png" mode="widthFix"></image>
			</view>
			<!-- 权限列表 -->
			<view class="jurisdictionBox">
				<view class="changeBar">
					<view :class="{ 'isPartner': selected === '1', 'partner': selected !== '1' }" @click="select('1')">
						初级合伙人
					</view>
					<view :class="{ 'isPartner': selected === '2', 'partner': selected !== '2' }" @click="select('2')">
						天使合伙人
					</view>
					<view :class="{ 'isPartner': selected === '3', 'partner': selected !== '3' }" @click="select('3')">
						至尊合伙人
					</view>
				</view>
				<view class="changeBar1" v-if="selected>personMsg.level.level">
					<view class="describe">
						名额有限，抢完为止
					</view>
				</view>

				<view v-for="(item,index) in personMsg.allDetails" :key="index" class="jurisdictionItem">
					<view class="leftImg">
						<image :src="item.image1" mode="widthFix"></image>
					</view>
					<view class="describe">
						{{item.describe}}
					</view>
					<view class="rightIcon" v-if="item.flag==1">
						<image src="../../static/img/jurisdiction-yes.png" mode="widthFix"></image>
					</view>
					<view class="rightIcon" v-if="item.flag==0">
						<image src="../../static/img/cuowu.png" mode="widthFix"></image>
					</view>
				</view>

			</view>
		</view>

		<view class="bottomBtn">
			<!-- 协议 -->
			<!-- <view class="tips">
				<image src="@/static/img/Property 1=off.png" mode="widthFix"></image>
				<text>点击立即购买表明您已阅读并同意《会员服务协议》</text>
			</view> -->
			<view class="enableBuyBtn" v-if="selected>personMsg.level.level" @tap="openPayType">
				立即升级 {{personMsg['level'+selected]}}元/{{priceConfig.year}} 年
			</view>
			<view class="buyBtn" v-if="selected<=personMsg.level.level">
				立即升级
			</view>
		</view>

		<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
			<view class="confirmOrderBottom">
				<view class="top">
					<text></text>
					支付
					<image @tap="data.show = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="confirmOrderBottom_1">
					<view v-for="(item,index) in paymentChannels" :key="index" class="" @tap="data.payChannel = item.value">
						<view class="left">
							<image :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
							{{item.name}}
						</view>
						<image :src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="bot">
					<view class="left">

					</view>
					<view class="right" @tap="pay">
						立即支付
					</view>
				</view>
			</view>

		</u-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>

</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import NavBar from "@/components/navBar.vue"
	import { userPartnerInfo, partnerRechargeConfig, rechargeVip } from '@/utils/api/index.ts'
	import { onShow } from '@dcloudio/uni-app'
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import { paymentChannels, payment } from '@/utils/index'
	const data = reactive<any>({
		onConfirm: () => { },
		payChannel: paymentChannels[0].value
	})

	// 定义一个响应式变量来存储当前选中的合伙人类型
	const selected = ref<string>('3');

	// 定义一个方法来处理点击事件并更新选中的合伙人类型
	const select = (partnerType : string) => {
		selected.value = partnerType;
		personMsg.value.allDetails = []
		personMsg.value.jurisdictionArr.forEach((key, index) => {
			if (key.level == selected.value) {
				personMsg.value.allDetails.push(key)
			}
		})
	};

	const personMsg = ref({
		level: {
			value: 'LEVEL_1',
			name: '初级合伙人',
			desc: '下级用户平台买/卖交易额的百分之0.5'
		},
		jurisdictionArr: [],
		allDetails: []
	})

	const priceConfig = ref({})

	function loadUserPartnerInfo() {
		userPartnerInfo().then(res => {
			personMsg.value = res.data
			select('3')
		})
	}

	function initStyle() {

		return {
			'background': 'linear-gradient(180deg, #3F556F 0%, #405672 100%)',
			'background-image': 'url("@/static/img/chujibj.png")',
			color: 'red'
		}
	}

	function loadPriceConfig() {
		partnerRechargeConfig().then(res => {
			priceConfig.value = res.data
		})
	}

	function openPayType() {
		data.show = true
	}

	const pay = () => {
		data.show = false;
		if (data.payChannel == 'WALLET') {
			data.show1 = true
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				rechargeVip({ data: { businessType: 'PARTNER_RECHARGE', payChannel: data.payChannel, level: 'LEVEL_' + selected.value, payPwd: e } }).then((res) => {
					uni.hideLoading()
					payment(data.payChannel, res.data).then((res) => {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		rechargeVip({ data: { businessType: 'PARTNER_RECHARGE', payChannel: data.payChannel, level: 'LEVEL_' + selected.value } }).then((res) => {
			uni.hideLoading()
			payment(data.payChannel, res.data).then((res) => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
		}).catch(() => {
			uni.hideLoading()
		})
	}



	onShow(() => {
		loadUserPartnerInfo()
		loadPriceConfig()
	})
</script>

<style lang="scss" scoped>
	.confirmOrderBottom {
		padding: 24rpx 43rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
			}

			text {
				width: 30rpx;
			}

			font-size: 32rpx;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text {
					margin-top: 10rpx;
					color: #FF263F;
				}
			}

			.right {
				width: 190rpx;
				line-height: 80rpx;
				background: #FF263F;
				text-align: center;
				border-radius: 80rpx;
				color: #fff;
			}
		}
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			// padding: 37rpx 35rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	:deep(.navBarTop) {
		background-color: transparent;
		color: #fff;
	}

	:deep(.left image) {
		color: #fff;
	}

	.index {
		height: 100vh;
		background: linear-gradient(180deg, #0F0F0F 0%, #1F192B 100%);
		padding-bottom: 100rpx;
		overflow: hidden;

		.top-title {
			height: 200px;
			background-image: url("@/static/img/enjoyBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.topbar {
			width: 100%;
			height: calc(100vh - 230rpx);
			margin-top: -280rpx;
			overflow-y: auto;
			padding-top: 60rpx;

			.cardContent {
				width: 680rpx;
				height: 145rpx;
				margin: 0 auto;
				// background-color: skyblue;
				padding: 40rpx;
				background-image: url("@/static/img/enjoyCardBg.png");
				background-repeat: no-repeat;
				background-size: 100%;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftContent {
					.name {
						margin: 50rpx 0 10rpx 20rpx;
						font-size: 36rpx;
						color: #42308c;
						font-weight: 700;
					}

					.time {
						height: 36rpx;
						// margin: 36rpx;
						font-size: 24rpx;
						color: #673D98;
						// margin-bottom: 30rpx;
					}

					.explain {
						height: 36rpx;
						font-size: 24rpx;
						color: #855EB0;
					}
				}

				image {
					width: 246rpx;
				}
			}
		}

		.jurisdictionBox {
			width: 702rpx;
			background: linear-gradient(180deg, rgba(18, 17, 18, 0) 0%, #282133 100%);
			border-radius: 24rpx;
			margin-left: 24rpx;
			padding-top: 30rpx;

			.changeBar {
				width: 620rpx;
				height: 80rpx;
				// background-color: skyblue;
				// margin-bottom: 20rpx;
				margin-left: 38rpx;
				background: #43264a;
				border-radius: 12rpx;
				padding: 8rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.isPartner {
					width: 260rpx;
					height: 64rpx;
					background: #FFFFFF;
					padding: 8rpx 18rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					font-size: 32rpx;
					color: #262626;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.partner {
					width: 260rpx;
					height: 64rpx;
					padding: 8rpx 18rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.changeBar1 {
				width: 620rpx;
				height: 40rpx;
				background: linear-gradient(149deg, #FFF2FD 0%, #ffcccc 32%, #ff6666 100%);
				margin-left: 38rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.describe {
					width: 100%;
					font-size: 24rpx;
					margin: 0 24rpx;
					text-align: center;
				}
			}

			.jurisdictionItem {
				height: 108rpx;
				padding: 0rpx 24rpx 0;
				// background-color: aqua;
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(196, 232, 242, 0.1);

				.leftImg {
					width: 56rpx;
					height: 56rpx;
					// background: linear-gradient(149deg, #FFF2FD 0%, #FFEEF9 32%, #D9A9E7 100%);
					// border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 56rpx;
					}
				}

				.describe {
					width: 502rpx;
					font-size: 26rpx;
					color: #FFFFFF;
					margin: 0 24rpx;
				}

				.rightIcon {
					image {
						width: 48rpx;
					}
				}
			}
		}

		.bottomBtn {
			height: 115rpx;
			padding: 0 56rpx;
			display: flex;
			padding-bottom: 10rpx;
			justify-content: center;
			flex-direction: column;

			.tips {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 24rpx;
					color: #8C8C8C;
				}
			}

			.buyBtn {
				width: 638rpx;
				height: 92rpx;
				background: gray;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(118, 104, 94, 0.3);
				border-radius: 46rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #4B3A93;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.enableBuyBtn {
				width: 638rpx;
				height: 92rpx;
				background: linear-gradient(147deg, #FDF4F4 0%, #FBC9F4 29%, #CBA0F3 100%), #C6EAFA;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(118, 104, 94, 0.3);
				border-radius: 46rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #4B3A93;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>